<template>
    <div class="generator-table-page-from">
        <el-dialog :title="dialogFrom.dialogTitle" :model-value="dialogFrom.dialogVisble"
            @input:model-value="updateDialogVisible" align-center width="80%" :before-close="onCancel"
            body-class="generator-table-page-from-body">
            <div>
                <el-tabs v-model="activeTabName" class="demo-tabs">
                    <el-tab-pane label="基础信息" name="tableInfo">
                        <div class="table-info-box">
                            <el-form ref="ruleFormRef" :model="generatorTableForm" label-width="auto"
                                label-position="left" :rules="rules">
                                <el-form-item label="父级菜单" prop="tableName">
                                    <el-select v-model="generatorTableForm.menuParentId" placeholder="请选择上级菜单">
                                        <el-option label="主目录" :value="0"></el-option>
                                        <el-option v-for="item in menuParentList" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="表名称" prop="tableName">
                                    <el-input v-model="generatorTableForm.tableName" clearable disabled></el-input>
                                </el-form-item>
                                <el-form-item label="表描述" prop="tableDescribe">
                                    <el-input v-model="generatorTableForm.tableDescribe" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="实体类名称" prop="className">
                                    <el-input v-model="generatorTableForm.className" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="表作者" prop="tableAuthor">
                                    <el-input v-model="generatorTableForm.tableAuthor" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="包名称" prop="packageName">
                                    <el-tooltip content="示例 代码模块名称 system" placement="top">
                                        <el-input v-model="generatorTableForm.packageName" clearable></el-input>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="包路径" prop="packagePath">
                                    <el-tooltip content="示例 代码模块放置路径 com.podium.web" placement="top">
                                        <el-input v-model="generatorTableForm.packagePath" clearable></el-input>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="generatorTableForm.remark" type="textarea" clearable></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="字段管理" name="columnTable">
                        <div class="column-box">
                            <el-table :data="generatorTableForm.generatorColumn" :border="true" style="width: 100%"
                                max-height="450px" size="small">
                                <el-table-column prop="columnName" align="center" label="字段名称"
                                    width="120"></el-table-column>
                                <el-table-column prop="columnDescribe" align="center" label="字段描述">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.columnDescribe"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="columnType" align="center" label="字段类型"
                                    width="100"></el-table-column>
                                <el-table-column prop="javaType" align="center" label="Java类型">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.javaType">
                                            <el-option label="Long" value="Long"></el-option>
                                            <el-option label="String" value="String"></el-option>
                                            <el-option label="Integer" value="Integer"></el-option>
                                            <el-option label="BigDecimal" value="BigDecimal"></el-option>
                                            <el-option label="LocalDateTime" value="LocalDateTime"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="javaField" align="center" label="Java字段名">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.javaField"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isIm" align="center" label="是否必填" width="80">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isIm" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isInsert" align="center" label="是否新增" width="80">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isInsert" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isUpdate" align="center" label="是否更新" width="80">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isUpdate" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isQuery" align="center" label="是否查询" width="80">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isQuery" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="isQuery" align="center" label="是否列表" width="80">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isList" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="queryType" align="center" label="查询类型">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.queryType" placeholder="请选择查询类型">
                                            <el-option label="=" value="="></el-option>
                                            <el-option label="!=" value="!="></el-option>
                                            <el-option label=">" value=">"></el-option>
                                            <el-option label=">=" value=">="></el-option>
                                            <el-option label="<" value="<"></el-option>
                                            <el-option label="<=" value="<="></el-option>
                                            <el-option label="LIKE" value="LIKE"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="displayType" align="center" label="显示类型">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.displayType" placeholder="请选择显示类型">
                                            <el-option label="文本框" value="input"></el-option>
                                            <el-option label="文本域" value="textarea"></el-option>
                                            <el-option label="数字" value="inputNumber"></el-option>
                                            <el-option label="小数" value="inputNumberStep"></el-option>
                                            <el-option label="下拉框" value="select"></el-option>
                                            <el-option label="单选框" value="radio"></el-option>
                                            <el-option label="复选框" value="checkbox"></el-option>
                                            <el-option label="日期控件" value="timePicker"></el-option>
                                            <el-option label="图片上传" value="imgUpload"></el-option>
                                            <el-option label="文件上传" value="upload"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>
                    <el-button @click="onCancel">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------
import { ref, reactive, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { getInfo, editInfo, type DataInfo } from '@/api/generator/generator'
import { getList as getMenuList,type TableData as MenuTableData} from '@/api/system/SysMenu'
// ---------------------------------------------------相关参数定义---------------------------------------------------
const props = withDefaults(defineProps<{
    dialogFrom: DialogFrom
}>(), {
    dialogFrom: () => ({
        dialogTitle: '',
        dialogVisble: false,
        infoId: null,
    })
});

/**
 * 表单对象
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 菜单父级列表
 */
const menuParentList = ref<MenuTableData[]>([]);

/**
 * 代码生成 默认数据库相关表信息
 */
const generatorTableForm = ref<DataInfo>(
    {
        id: null,
        menuParentId: 0,
        tableName: '',
        tableDescribe: '',
        className: '',
        tableAuthor: '',
        packageName: '',
        packagePath: '',
        remark: '',
        generatorColumn: []
    }
);

/**
 * 表单验证规则
 */
const rules = reactive<FormRules<DataInfo>>({
    tableName: [
        { required: true, message: '请输入表名称', trigger: 'blur' },
    ],
    tableDescribe: [
        { required: true, message: '请输入表描述', trigger: 'blur' },
    ],
    className: [
        { required: true, message: '请输入实体类名称', trigger: 'blur' },
    ],
    tableAuthor: [
        { required: true, message: '请输入表作者', trigger: 'blur' },
    ],
    packageName: [
        { required: true, message: '请输入包名称', trigger: 'blur' },
    ],
    packagePath: [
        { required: true, message: '请输入包路径', trigger: 'blur' },
    ]
})

/**
 * 当前激活的 tab 面板的 name
 */
const activeTabName = ref('tableInfo');

// ---------------------------------------------------事件定义---------------------------------------------------
const emit = defineEmits(['update:dialogFrom', 'onParentSearch']);

watch(() => props.dialogFrom.dialogVisble, (newValue, oldValue) => {
    if (newValue) {
        getMenuListApi();
        getInfoApi();
    }
})

// ---------------------------------------------------操作方法定义---------------------------------------------------
const getMenuListApi = async () => {
    await getMenuList({ menuType: 1 }).then((res) => {
        if (res.data.code === 200) {
            menuParentList.value = res.data.data;
        }
    })
}

/**
 * 获取表单信息
 */
const getInfoApi = async () => {
    if (props.dialogFrom.infoId) {
        await getInfo(props.dialogFrom.infoId).then((res) => {
            if (res.data.code === 200) {
                generatorTableForm.value = res.data.data;
                generatorTableForm.value.generatorColumn = res.data.data.generatorColumn == null ? [] : res.data.data.generatorColumn;
                generatorTableForm.value.packagePath = res.data.data.packagePath || 'com.podium.web';
            }
        })
    }
}

/**
 * 数据表单提交
 * @param ref 表单对象
 */
const onSubmit = async (ref: FormInstance | undefined) => {
    if (!ref) return
    await ref.validate((valid, fields) => {
        if (valid) {
            editInfo(generatorTableForm.value).then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success({
                        message: '修改成功',
                        type: 'success'
                    })
                    onCancel();
                }
            })
        } 
    })
};

/**
 * 弹窗对话框关闭
 * @returns void
 */
const onCancel = () => {
    // 这里可以添加取消逻辑
    emit('update:dialogFrom', {
        dialogVisble: false,
        dialogTitle: '',
        infoId: null
    });
    emit('onParentSearch');
    resetFrom();
};

/**
 * 重置表单
 * @returns void
 */
const resetFrom = () => {
    generatorTableForm.value = {
        id: null,
        menuParentId: 0,
        tableName: '',
        tableDescribe: '',
        className: '',
        tableAuthor: '',
        packageName: '',
        packagePath: '',
        remark: '',
        generatorColumn: []
    };
    activeTabName.value = 'tableInfo'
}

/**
 * 弹窗对话框显示状态
 * @param visible 状态
 * @returns void
 */
const updateDialogVisible = (dialogFromParams: DialogFrom) => {
    emit('update:dialogFrom', dialogFromParams);
}

// ---------------------------------------------------实体定义区---------------------------------------------------
export interface DialogFrom {
    dialogTitle: string;
    dialogVisble: boolean;
    infoId: number | null;
}
</script>

<style lang="scss" scoped>
.generator-table-page-from {
    width: 100%;

    :deep(.generator-table-page-from-body) {
        width: 100%;
        height: 500px;

        .demo-tabs {
            height: 100%;
            overflow-y: auto;

            .el-tabs__content {
                width: 100%;
                height: 100%;
            }

        }

    }
}
</style>